// import { useRef } from 'react';
// function App() {
//   const refBox = useRef(null);
//   // 所以要改为，有记忆功能的ref
//   const handleClick = () => {
//     console.log(refBox.current);
//     refBox.current.style.background = '#ff0';
//   };
//   return (
//     <div>
//       hello App
//       <button onClick={handleClick}>ref操作</button>
//       <br />
//       <div ref={refBox}>盒子</div>
//     </div>
//   );
// }
// export default App;
// import { useRef, useState } from 'react';
// function App() {
//   const refBox = useRef(null);
//   const list = useState([
//     { id: 0, content: 1 },
//     { id: 1, content: 2 },
//     { id: 2, content: 3 },
//   ]);
//   // 所以要改为，有记忆功能的ref
//   const handleClick = () => {
//     console.log(refBox.current);
//     refBox.current.style.background = '#ff0';
//   };
//   return (
//     <div>
//       hello App
//       <button onClick={handleClick}>ref操作</button>
//       <br />
//       <ul>
//         {list.map((item) => {
//           // const lRef = useRef(null);
//           // return (
//           //   <li key={item.id} ref={lRef}>
//           //     {item.content}
//           //   </li>
//           // );
//           // 在使用 React 的 useRef Hook 时遇到错误 "React Hook "useRef" cannot be called inside a callback. React Hooks must be called at the top level of a functional component or other Hook." 通常是因为你在组件的某个回调函数中调用了 useRef。useRef 应该直接在组件的顶层或者在其他 Hooks 内部调用，而不是在如事件处理函数或条件语句中直接调用。
//         })}
//       </ul>
//     </div>
//   );
// }
// export default App;

import { useState } from 'react';
function App() {
  const [list] = useState([
    { id: 1, text: 'aaa' },
    { id: 2, text: 'bbb' },
    { id: 3, text: 'ccc' },
  ]);
  console.log(list, 'list');
  return (
    <div>
      hello App
      <br />
      <ul>
        {list.map((item) => {
          return (
            <li
              key={item.id}
              ref={(selfRef) => {
                selfRef.style.background = '#f0f';
              }}
            >
              {item.text + 'hhh'}
            </li>
          );
        })}
      </ul>
    </div>
  );
}
export default App;
